<template>
	<div class="Home">
		<div class="full-page" ref="page">
			<div class="list" ref="container" @mousewheel="mouseWheel" @DOMMouseScroll="mouseWheel">
				<div class="item">
					<div class="solution box">
						<div class="company">
							<div class="company_name animation textSpan van">
								<span>{{$t("companyModel.name")}}</span>
							</div>
							<div class="company_index animation textSpan van">
								<span>{{$t("companyModel.slogan")}}</span>
							</div>
							<div class="company_about animation textSpan van">
								<span>{{$t("about")}}
									<span class="icon"> > </span>
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="companyInfo box">

					</div>
				</div>
				<div class="item">
					<div class="product box">

					</div>
				</div>
				<div class="item">
					<div class="productT box">

					</div>
				</div>
			</div>
			<!-- 指示器 -->
			<!-- <div class="points">
				<div v-for="(e, i) in 4" class="item" :key="e" :class="itemIndex === i + 1 ? 'item-act' : ''"></div>
			</div> -->
		</div>
	</div>
</template>

<script>
	export default {
		name: "Product",
		data() {
			return {
				isScroll: false, // 是否能滚动
				itemIndex: 0, // 当前下标
				len: 4, // 总个数
			};
		},
		methods: {
			//打开页面时淡出
			easeIn() {
				const lists = document.querySelectorAll(".animation")
				//设置延迟动画效果
				for (let i = 0; i < lists.length; i++) {
					lists[i].style.setProperty('--delay', `${i * 0.5}s`)
				}
			},
			handleMove() {
				this.isScroll = true;
				const scrollHeight = this.$refs.page.clientHeight;
				this.$refs.container.style.transform = `translateY(-${
		    (this.itemIndex - 1) * scrollHeight
		  }px)`;
				setTimeout(() => (this.isScroll = false), 800); // 防止连续滚动，加延时
			},
			mouseWheel(event) {
				var scrollTop = document.documentElement.scrollTop
				var box = document.querySelector(".box");

				if (this.isScroll) { // 防止连续滚动
					return false;
				}
				if (event.deltaY > 0) {
					if (this.itemIndex === this.len) return; // 最后一个禁止向下滚动
					this.itemIndex += 1;
					// 下滑隐藏导航栏
					box.style.animation = "nav-btm 0.3s ease-in"
					box.style.animationFillMode = "both"

				} else {
					if (this.itemIndex === 1) return; // 第一个禁止向上滚动
					this.itemIndex -= 1;
					// 上滑显示导航栏
					box.style.animation = "nav-top 0.3s ease-in"
					box.style.animationFillMode = "both"
					if (scrollTop == 0) {
						box.style.backgroundColor = "transparent"
					} else {
						box.style.backgroundColor = "rgba(0,0,0,20%)"
					}
				}
				this.handleMove();
			},
		},
		mounted() {
			this.easeIn()
			setTimeout(() => (this.itemIndex += 1), 10); // 初始加一，为了加载第一页动画
		},
	}
</script>

<style scoped>
	body {
		overflow-y: scroll;
		scroll-behavior: smooth;
		transition: all 0.3s;
	}

	.Home {
		width: 100%;
		height: 100vh;
	}

	.solution {
		width: 100%;
		height: 100vh;
		background-color: #e58120;
		background-image: url("../../static/img/homeImg.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}

	/*公司名称*/
	.solution .company {
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translate(-50%, -25%);
		text-align: center;
	}

	.animation {
		animation: fadeInDown 1s cubic-bezier(0.56, 0.09, 0.49, 1.37) forwards var(--delay);
	}

	.solution .company .company_name {
		font-size: 32px;
		font-weight: bolder;
		opacity: 0;
	}

	.solution .company .company_index {
		font-size: 40px;
		opacity: 0;
	}

	.solution .company .company_about {
		transition: all 1s;
		opacity: 0;
	}

	.solution .company .company_about:hover {
		transform: scale(1.1);
		font-weight: bolder;
		cursor: pointer;
	}

	.companyInfo {
		width: 100%;
		height: 100vh;
	}

	.product {
		width: 100%;
		height: 100vh;
	}

	.productT {
		width: 100%;
		height: 100vh;
		background-color: #e5d5ea;
	}

	/* 全屏滚动 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(100px);
		}

		to {
			opacity: 1;
			transform: translateY(0px);
		}
	}

	@keyframes slideLeft {
		from {
			opacity: 0;
			transform: translateX(-100%);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}

	@keyframes slideRight {
		from {
			opacity: 0;
			transform: translateX(100%);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(-100%);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(100%);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}

	.full-page {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;

		.list {
			width: 100vw;
			transition: 0.6s;

			.item {
				height: 100vh;
				transition: 0.6s all;
			}
		}

		.points {
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			right: 10px;

			.item {
				width: 4px;
				height: 20px;
				margin-bottom: 25px;
				background-color: rgba($color: gray, $alpha: 0.5);
				transition: 0.6s;

				&.item-act {
					height: 50px;
					background-color: #fff;
				}
			}
		}
	}
</style>
